import 'package:flutter/cupertino.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:news_flutter/utils/precompile.dart';
typedef MyCacheImageTap = void Function(String tt);
class MyCacheImage extends StatefulWidget {
  final String url;
  //点击图片回调
  final MyCacheImageTap callback;
  final BoxFit fit;
  final AlignmentGeometry alignment;
  final double radius;
  const MyCacheImage({Key key, this.url, this.callback, this.fit = BoxFit.cover, this.alignment = Alignment.center, this.radius =0}) : super(key: key);
  @override
  _MyCacheImageState createState() => _MyCacheImageState();
}

class _MyCacheImageState extends State<MyCacheImage> {
  @override
  Widget build(BuildContext context) {
    if (widget.callback ==null){
      return _imageWidget();
    }
    else{
      return InkWell(
        onTap: (){
          widget.callback(widget.url);
        },
        child: _imageWidget(),
      );
    }
  }
  Widget _imageWidget(){
    //TODO  疑问，为什么这个控件可以拦截上层的点击效果？

    return Container(
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(widget.radius)),
      ),
      child: CachedNetworkImage(
        imageUrl: widget.url,
        alignment: widget.alignment,
        placeholder: (context, url){
          return Center(
            child: CircularProgressIndicator(
              backgroundColor: MyColor.STYLE_RED,
            ),
          );
        },
        errorWidget: (context, url, error) => Icon(Icons.error),
        fit: widget.fit,
      ),
    );
  }
}
